<template>
	<view>
		<u-navbar :is-back="false" title="登录" :background="background">
			<view class="slot-right" @click="cancelLogin">
				<u-icon name="close" size="30rpx"></u-icon>
			</view>
		</u-navbar>
		<view>
			<view class="in-center">
				<image src="../../static/qifuyun72x72.png" class="user-logo"></image>
			</view>
			<view class="input-center">
				<view class="input-content">
					<view class="image-block">
						<image src="../../static/telephoneNum-logo.svg" class="small-icon"></image>
					</view>
					<input placeholder="手机号码" class="input-style" 
					placeholder-style="font-size:35rpx;color:#BEBEBE" @input="setTelephoneNum"/>
				</view>
			</view>
			<view class="input-center">
				<view class="input-content">
					<view class="image-block">
						<image src="../../static/password-logo.svg" class="small-icon"></image>
					</view>
					<input placeholder="登录密码" :password="showPassword" class="input-style" 
					placeholder-style="font-size:35rpx;color:#BEBEBE;" @input="setPassword"/>
					<switch style="background-color: #FFFFFF;" color="#999999" @change="changeShowPassword"/>	
				</view>
			</view>
			<button class="button-class" @click="toLogin">登录</button>
			<!-- <view class="login-way" @click="useCheckCode">验证码登录</view> -->
		</view>
		<view class="agree-container">
			<view class="check-container" @click="checked">
				<image class="check-img" :src="checkImgSrc"></image>
			</view>
			<view class="text-container">
				<text style="color: #000000;">同意</text>
				<text style="color: #d8c31e;" @click="open(0)">《企服云服务协议》</text>
				<text style="color: #000000;">以及</text>
				<text style="color: #d8c31e;" @click="open(1)">《企服云隐私政策》</text>
			</view>
		</view>
		<uni-popup ref="popup" backgroundColor="#f0f0f0" type="center">
			<scroll-view scroll-y="true" style="height: 1000rpx;width: 750rpx;background-color: #f0f0f0;margin-top: 20rpx;margin-bottom: 10rpx;" scroll-with-animation="true">
				<ruleDisplay :htmlStr="roleInfo" @getClick="closePop"></ruleDisplay>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE
	} from "../../util/network.js"
	import {
		initRongCloud
	} from "../../util/rongCloud/cloudUtil.js"
	import {
		uniSetStorageSync,
	} from "../../util/funcs.js"
	import {
		CURRENT_USER_KEY,
	} from "../../util/misc.js"
	export default{
		data(){
			return{
				checkState:false,
				checkImgSrc:"../../static/unchecked.png",
				showPassword:true,
				telephoneNum:'',
				password:'',
				background : {
					backgroundColor : '#FFFFFF'
				},
				roleInfo:'',
			}
		},
		methods:{
			open(type){
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/protocol/mobile-show`,
					data:{
						type:type
					},
					method:'GET',
					success: function (res) {
						console.log('协议',res)
						if(res.data.code == 200){
							_this.roleInfo = res.data.data.content
							uni.navigateTo({
								url:'../ruleDisplay/ruleDisplay?url=true' + '&htmlStr=' + encodeURIComponent(_this.roleInfo)
							})
						}
						if(res.data.code == 4000){
							uni.showModal({
								content:'后台管理暂未配置相关资源',
								showCancel:false
							});
						}
					}
				})
			},
			closePop(){
				this.$refs.popup.close()
			},
			checked(){
				this.checkState=!this.checkState
				if(this.checkState){
					this.checkImgSrc = "../../static/checked.png"
				}else{
					this.checkImgSrc = "../../static/unchecked.png"
				}
			},
			
			changeShowPassword(){
				this.showPassword = !this.showPassword
			},
			useCheckCode(){
				uni.redirectTo({
					url:"../checkCodeLogin/checkCodeLogin"
				})
			},
			setTelephoneNum(e){
				this.telephoneNum = e.detail.value
			}, 
			setPassword(e){
				this.password = e.detail.value
			},
			toLogin(){
				if(this.checkState){
					if((this.telephoneNum!=='')&&(this.password!=='')){
						uni.request({
							// url: 'http://175.24.115.95/login',
							url:`${ONLINE_SERVER_ADDRESS_BASE}/login`,
							method: 'POST',
							data: {
								phone: this.telephoneNum,
								password: this.password,
								// ...this.aForm,
								// uuid: uuid,
							},
							success: (res) => {
								console.log('登录 result: ', res.data);
								if (res.data.code === 200) {
									uni.showModal({
										content:'登录成功',
										showCancel:false
									});
									// uni.setStorageSync({    //异步保存用户信息 （setStorageSync 为同步信息）13756024245
									// 	key: 'userinfo',
									// 	data: res.data.data.userinfo
									// });
									let newUserInfo = res.data.data.userinfo
									newUserInfo.rongcloud_token = res.data.data.rongCloudToken
									newUserInfo.rongCloud_id = res.data.data.rongCloudId
									uniSetStorageSync(CURRENT_USER_KEY,res.data.data.userinfo)
									uni.setStorage({    //异步保存用户信息 （setStorageSync 为同步信息）
										key: 'token',
										data: res.data.data.token,
									});
									uni.setStorageSync('first', true)
									initRongCloud()
									setTimeout(()=>{
										uni.switchTab({
											url:'../home/home?id=' + this.telephoneNum
										})
									},2000)
								}else{
									if(res.data.code === 1008){
										uni.showModal({
											content:'账号异常，不能登录',
											showCancel:false
										});
									}else{
										uni.showModal({
											content:'账号密码错误',
											showCancel:false
										});
									}
								}
							},
							fail: res => {
								console.log('调用失败返回');
							}
						});
					}else{
						if(this.telephoneNum===''){
							uni.showModal({
								content:'请输入手机号',
								showCancel:false
							})
						}else{
							if(this.password===''){
								uni.showModal({
									content:'请输入密码',
									showCancel:false
								})
							}
						}
					}
				}else{
					uni.showModal({
						content:'请先同意服务协议',
						showCancel:false
					})
				}
			},
			cancelLogin(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
	.in-center{
		display: flex;
		justify-content: center;
	}
	.button-class{
		font-size: 40rpx;
		margin-top: 40rpx;
		width: 700rpx;
		height: 100rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		box-shadow: 0rpx 9rpx 18rpx rgba(199, 199, 199, 0.3);
		opacity: 1;
		border-radius: 10px;
	}
	.user-logo{
		width: 200rpx; 
		height: 200rpx;
		margin: 100rpx 0 100rpx 0;
	}
	.input-style{
		background-color: #FFFFFF;
		height: 100rpx;
		width: 470rpx;
		font-size: 35rpx;
	}
	.small-icon{
		background-color:#FFFFFF; 
		width: 50rpx;
		height: 50rpx;
		padding:0 10rpx 0 10rpx;
	}
	.input-center{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.input-content{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 700rpx;
		border: solid 1rpx #DCDCDC;
		background-color: #FFFFFF;
	}
	.login-way{
		display: flex;
		justify-content: center;
		color: #007AFF;
		margin-top: 50rpx;
		font-size: 35rpx;
	}
	.image-block{
		width: 100rpx;
		height: 100rpx;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.slot-right{
		display: flex;
		align-items: flex-end;
		padding-left: 670rpx;
		font-size: 30rpx;
		color: #0000FF;
	}
	.agree-container{
		position: absolute;
		bottom: 0rpx;
		display: flex;
		height: 200rpx;
		width: 100%;
		color: #0000FF;
	}
	.check-container{
		display: flex;
		height: 100%;
		width: 10%;
	}
	.check-img{
		padding-left: 40%;
		display: flex;
		height: 40rpx;
		width: 40rpx;
		color: #0000FF;
	}
</style>
